﻿@using KelonProud.Administration.Models
@model KelonProud.Administration.Models.UpfileModel

<input type="hidden" id="FilePath" value="@Model.FilePath" /> <!--文件所在目录-->
<input type="hidden" id="IsImg" value="@Model.IsImg.GetHashCode()" /> <!--是否为图片上传-->
<input type="hidden" id="ControlName" value="@Model.ControlName" /> <!--控件名-->
<div style="padding:10px;">
    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="testList">
            <i class="layui-icon layui-icon-icon-import"></i>选择文件（可多选）
            @if (Model.IsRequire)
            {
                <span class="imust">*</span>
            }
        </button>
        <button type="button" class="layui-btn" id="testListAction">
            <i class="layui-icon layui-icon-uploading"></i>开始上传
        </button>
        <!--放置文件列表-->
        <div class="layui-upload-list">
            <table class="layui-table" lay-size="sm">
                <thead>
                    <tr>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    @if (Model.FileList != null && Model.FileList.Count > 0)
                    {
                        foreach (var item in Model.FileList)
                        {
                            //文件路径
                            string path = item.FileFolderPath + "\\" + item.DisplayName + "." + item.FileExtension;
                            //文件名
                            string fileName = item.DisplayName + "." + item.FileExtension;
                        <tr>
                            <td><a href="@path">@fileName</a></td>
                            <td>
                                @Math.Round((Double)item.SizeKb / 1024, 1)
                                KB
                            </td>
                            <td><span style="color: #5FB878;">已上传</span></td>
                            <td>
                                <input type="hidden" class="demo-file-id" value="@item.Id" />
                                <button class="layui-btn layui-btn-mini layui-btn-danger" onclick="upfile.deleteFile(this);">删除</button>
                            </td>
                        </tr>
                        }
                    }
                </thead>
                <tbody id="fileList"></tbody>
            </table>
        </div>

    </div>
    @if (Model.IsRequire)
    {
        <input type="hidden" id="@Model.ControlName" name="@Model.ControlName" value="@Model.ControlValue" class="validate">
    }
    else
    {
        <input type="hidden" id="@Model.ControlName" name="@Model.ControlName" value="@Model.ControlValue">
    }
</div>

<script type="text/javascript">
    //多文件列表示例
    layui.use(['form', 'upload', 'jquery'], function () {
        var form = layui.form; $ = layui.jquery, upload = layui.upload;
        var url =  "@Url.Action("Upload", "Attachment")";
        var fileListView = $('#fileList');
        var uploadListIns = upload.render({
            elem: '#testList'
            , url: url
            , data: { fileUploadPath: $('#FilePath').val() }
            , field: 'file'
            , method: 'post'
            , accept: 'file'
            , multiple: true
            , auto: false
            , bindAction: '#testListAction'
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    //在这里针对图片和普通文件的不同处理操作，考虑展示效果

                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1024).toFixed(1) + 'KB</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    fileListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                var controlName=$("#ControlName").val();
                var $control=$("#"+controlName);//控件
                if (res!=null&&res!="") { //上传成功
                    var tr = fileListView.find('tr#upload-' + index), tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    //tds.eq(3).html(''); //清空操作
                    var opHt = '<input type="hidden" class="demo-file-id" value="' + res.result.attachmentId + '" />';
                    opHt += '<button class="layui-btn layui-btn-mini layui-btn-danger" onclick="upfile.deleteFile(this);">删除</button>';
                    tds.eq(3).html(opHt); //调整操作区（为删除）
                    //文件控件值处理;
                    var files = $control.val();//获取已上传文件(以逗号隔开)
                    files = files === "" ? res.result.attachmentId: files + "," + res.result.attachmentId;
                    $control.val(files);
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = fileListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });

    });

    var upfile = {
        //删除上传附件
        deleteFile: function (curCtr) {
            var controlName = $("#ControlName").val();
            var $control = $("#" + controlName);//控件
            //删除tr，同时删除Files中的值
            var realFileId = $(curCtr).prev().val();//真实名
            var $tr = $(curCtr).parent().parent();
            $tr.remove();
            if (realFileId != null && realFileId.length > 0) {
                var files = $control.val();
                var reg = new RegExp("," + realFileId, "g");
                files = files.replace(reg, '');//将id从集合中删除
                $control.val(files);
            }
        }
    }


</script>
